<template>
  <u-sticky
    :enable="$$FormData.position === 'fixed-top'"
    @fixed="fixed = true"
    @unfixed="fixed = false"
  >
    <div
      class="goods-search"
      :class="{hidden: !show_search, fixed}"
      :style="{
        paddingTop: $$FormData.frame_margin + 'rpx',
        paddingBottom: $$FormData.frame_margin + 'rpx',
        backgroundColor: $$FormData.background_color
      }"
      @click="handleToSearchGoods"
    >
      <div
        class="goods-search__inner"
        :style="{
          height: $$FormData.frame_height + 20 + 'rpx'
        }"
      >
        <div class="goods-search__view">
          <div
            class="goods-search__filed"
            :class="[
              `goods-search__filed-${$$FormData.frame_style}`,
              `goods-search__filed-${$$FormData.text_position}`
            ]"
            :style="{
              backgroundColor: $$FormData.frame_color,
              color: $$FormData.text_color
            }"
          >
            <i class="goods-search__icon ri-search-line"></i>
            <label
              class="goods-search__box"
              :style="{
                height: $$FormData.frame_height + 'rpx'
              }"
            >
              <input
                placeholder="搜索商品"
                class="goods-search__input"
                disabled
                :style="{color: $$FormData.text_color}"
              />
            </label>
          </div>
        </div>
      </div>
    </div>
  </u-sticky>

</template>

<script>
import decorMixin from '../decor-mixin'
export default {
  name: 'GoodsSearchPreview',
  mixins: [decorMixin],
  data() {
    return {
      fixed: false,
      scrollTop: 0,
      show_search: true,
      moduleScrollTop: 0
    }
  },
  mounted() {
    const { position, show_style } = this.$$FormData
    if (position === 'normal' || show_style === 'resident') return
    uni.$on('mini-page-scroll', this.showSearch)
    uni.createSelectorQuery()
      .in(this)
      .select('.goods-search')
      .boundingClientRect()
      .exec(res => {
        if (res[0]) {
          this.moduleScrollTop = res[0].top
        }
      })
  },
  methods: {
    showSearch(e) {
      let show_search = this.show_search
      if (e <= (this.moduleScrollTop + 100)) {
        this.show_search = true
        return
      }
      if (e <= 0) {
        show_search = true
      } else {
        this.show_search = e <= this.scrollTop
      }
      this.scrollTop = e
    },
    handleToSearchGoods() {
      const pages = getCurrentPages()
      const route = pages[pages.length-1]
      const path = route.route
      let url = '/pages/search/search'
      if (path.indexOf('pages/shop/shop') !== -1) {
        let shop_id = ''
        // #ifdef H5
        shop_id = route.shopInfo.shop_id
        // #endif
        // #ifdef APP-PLUS || MP
        shop_id = route.options.shop_id
        // #endif
        url += `?seller_id=${shop_id}`
      }
      console.log('url: ', url)
      uni.navigateTo({
        url,
        animationType: 'slide-in-bottom'
      })
    }
  },
  destroyed() {
    uni.$off('mini-page-scroll')
  }
}
</script>

<style lang="scss" scoped>
.goods-search {
  position: relative;
  width: 100%;
  transition: all ease .2s;
  top: 0;
  &.hidden.fixed {
    top: -100rpx;
  }
  .goods-search__view {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 5rpx*2 15rpx*2;
    box-sizing: border-box;
    .goods-search__filed {
      display: flex;
      align-items: center;
      flex: 1;
      transition: all ease .2s;
      &.goods-search__filed-square {
        border-radius: 4rpx*2;
      }
      &.goods-search__filed-round {
        border-radius: 20rpx*2;
      }
      &.goods-search__filed-center {
        justify-content: center;
        .goods-search__box {
          width: 80rpx*2;
          flex: none;
        }
      }
      .goods-search__icon {
        font-size: 16rpx*2;
        margin: 0 -2rpx*2 0 12rpx*2;
      }
      .goods-search__box {
        display: flex;
        align-items: center;
        flex: 1;
        padding: 0 10rpx*2;
        box-sizing: border-box;
      }
      .goods-search__input {
        border: none;
        outline: none;
        width: 100%;
        height: 24rpx*2;
        font-size: 14rpx*2;
        background-color: transparent;
        &::-webkit-input-placeholder {
          color: inherit;
          font-size: inherit;
        }
      }
    }
  }
}
</style>
